<template>
  <div
    v-if="showTools"
    class="group-tab-tools"
    :style="{left: x + 'px', top: y + 'px'}"
    @mouseenter="handleMouseEnter"
    @mousemove="handleMouseMove"
    @mouseleave="handleMouseLeave"
  >
    <ul class="tools-wrapper">
      <li class="tool-wrapper" v-for="(tool, index) in tools" :key="index" @click.stop="handleClick(tool)">
        <p>{{tool.name}}</p>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {outreachGroupComputed, outreachGroupMethods} from '@state/helpers'

  const COMPONENT_NAME = 'GROUP_TAB_TOOLS'

  export default {
    name: COMPONENT_NAME,
    data() {
      return {
        tools: [
          {name: '添加子部门', fn: 'handleAddDepartment'},
          {name: '编辑', fn: 'handleEditDepartment'},
          {name: '上移', fn: 'handleMoveDepartment', moveType: 'up'},
          {name: '下移', fn: 'handleMoveDepartment', moveType: 'down'},
          {name: '删除', fn: 'deleteDepartment'},
        ]
      }
    },
    computed: {
      ...outreachGroupComputed
    },
    methods: {
      ...outreachGroupMethods,
      handleMouseEnter(e) {
        this.updateIsEnter(true)
        this.handleTools(true)
      },
      handleMouseMove(e) {
        this.handleTools(true)
      },
      handleMouseLeave(e) {
        this.updateIsEnter(false)
        this.handleTools(false)
      },
      handleClick(tool) {
        this.handleMouseLeave()
        const key = tool.fn
        this[key](tool)
      },
      handleAddDepartment() {
        if (this.isLastDepartment) {
          alert('不能再添加子部门了！')
          return
        }
        this.handleModal({isShow: true, title: '添加子部门', useType: 'addDepartment'})
      },
      handleEditDepartment() {
        this.handleModal({isShow: true, title: '编辑子部门名称', useType: 'editDepartment'})
      },
      handleMoveDepartment(tool) {
        const {moveType} = tool
        this.moveDepartment({moveType})
      }
    }

  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@design"

  .group-tab-tools
    position :fixed
    .tools-wrapper
      border: 0.5px solid $color-line
      background :#fff
      .tool-wrapper
        height :30px
        width :140px
        text-align :center
        line-height :@height
        &:last-child
          border-bottom :none

</style>
